<template>
  <div class="fczt-analyse-dialog">
    <div class="analyse-left">
      <div class="analyse-title">房产销售总体情况</div>
      <div class="analyse-block">
        <div class="analyse-block-item" v-for="(item, index) in list" :key="index">
          <div class="analyse-block-item__title">{{ item.label }}</div>
          <div class="analyse-block-item__mid">
            <span class="analyse-block-item__num">{{ item.value }}</span>
            <span class="analyse-block-item__unit">{{  item.unit }}</span>
          </div>
          <div class="analyse-block-item__bottom">
            <span class="analyse-block-item__pre">同比</span>
            <span class="analyse-block-item__arrow">
              <i class="el-icon-caret-top"></i>
            </span>
            <span class="analyse-block-item__num2">{{ item.per }}</span>
            <span class="analyse-block-item__unit2">%</span>
          </div>
        </div>

      </div>
    </div>
    <div class="analyse-right">
      <div class="analyse-title">销售面积对比</div>
      <div class="analyse-right-main">
        <fczt-chart-bar />
      </div>
      <div class="analyse-title">销售均价对比</div>
      <div class="analyse-right-main">
        <fczt-chart-line />
      </div>
    </div>
  </div>
</template>
<script>

import fcztChartBar from './fczt-chart-bar'
import fcztChartLine from './fczt-chart-line'

export default {
  name: 'fczt-analyse-dialog',
  components: {
    fcztChartBar,
    fcztChartLine
  },
  data() {
    return {
      list: [
        {label: '销售套数', value: 240, unit: '套', per: 0.3},
        {label: '销售面积', value: 8843, unit: '万㎡', per: 0.4},
        {label: '成交均价', value: '12,500', unit: '元', per: 0.5}
      ]
    }
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.fczt-analyse-dialog {
  height: 100%;
  display: flex;
  padding: 0 30px 30px;

  .analyse {
    &-left {
      display: flex;
      flex-direction: column;
      margin-right: 40px;
    }

    &-right {
      display: flex;
      flex-direction: column;
      flex: 1;

      &-main {
        flex: 1;
      }
    }

    &-title {
      font-size: 24px;
      color: #EAFEFF;
      margin-bottom: 15px;
      margin-top: 20px;
    }

    &-block {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &-item {
        width: 250px;
        height: 32%;
        background: url("~@/assets/screen/dialog-block-bg.svg") no-repeat;
        background-size: 100% 100%;
        padding: 28px 20px 28px 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        &__title {
          font-size: 28px;
          letter-spacing: 2px;
          color: #EAFEFF;
        }

        &__mid {
          color: rgba(128, 255, 255, 0.75);
          display: flex;
          align-items: baseline;
        }
        &__num{
          font-size: 40px;
          letter-spacing: normal;
        }

        &__unit {
          font-size: 18px;
        }

        &__bottom {
          display: flex;
          align-items: baseline;
        }
        &__pre {
          font-size: 16px;
        }
        &__arrow {
          color: #FF5D17;
        }

        &__num2 {
          font-size: 28px;
          color: #F59972;
        }

        &__unit2 {
          font-size: 12px;
          color: #F59972;
        }
      }
    }
  }
}
</style>
